<template>
    <div class="home-container">
        <!-- 顶部导航栏 -->
        <el-header class="header">
            <div class="header-content">
                <div class="left-section">
                    <div class="logo">
                        <img src="@/assets/img/logo.png" alt="logo" class="logo-img"/>
                        <span class="company-name">亿星航梦科技招聘</span>
                    </div>
                    <div class="nav-menu">
                        <span class="nav-item active">首页</span>
                        <span class="nav-item">社会招聘</span>
                        <span class="nav-item">校园招聘</span>
                        <span class="nav-item">关于我们</span>
                    </div>
                </div>
                <div class="nav-right">
                    <el-button v-if="!isLogin" type="primary" @click="handleLogin" style="margin-left: 250px;">登录</el-button>
                    <template v-else>
                        <el-dropdown>
                            <span class="user-info">
                                <el-avatar :size="32" :src="userInfo.user.userPic">{{ userInfo.user.username?.charAt(0) }}</el-avatar>
                                <span class="username">{{ userInfo.user.username }}</span>
                                <el-icon><ArrowDown /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
                                    <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </div>
            </div>
        </el-header>

        <!-- Banner区域 -->
        <div class="banner">
            <div class="banner-content">
                <h1 class="banner-title">加入我们，开启职业新篇章</h1>
                <p class="banner-subtitle">在这里，发现更好的自己</p>
                <div class="search-section">
                    <el-input 
                        v-model="search" 
                        placeholder="搜索职位、部门或关键词" 
                        class="search-input"
                        clearable
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                    <el-button type="primary" size="large" @click="handleSearch">搜索</el-button>
                </div>
            </div>
        </div>

        <!-- 主要内容区 -->
        <div class="main-content">
            <!-- 筛选区域 -->
            <div class="filter-section">
                <div class="filter-item">
                    <span class="filter-label">部门：</span>
                    <div class="filter-options">
                        <span style="margin-top: 5px;cursor: pointer;" @click="loadPositions()">不限</span>
                        <span 
                            v-for="item in departments" 
                            :key="item.departmentId"
                            :class="['option', department === item.departmentId ? 'active' : '']"
                            @click="getPositionsByDepartments(item)"
                        >
                            {{ item.departmentName }}
                        </span>
                    </div>
                </div>
                <div class="filter-item">
                    <span class="filter-label">学历：</span>
                    <div class="filter-options">
                        <span style="margin-top: 5px;cursor: pointer;" @click="loadPositions()">不限</span>
                        <span 
                            v-for="item in degreeMap.data" 
                            :key="item"
                            :class="['option', degree === item ? 'active' : '']"
                            @click="degree(item)"
                        >
                            {{ item.degree }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- 职位列表 -->
            <div class="position-list">
                <el-card v-for="position in positions" :key="position.positionId" class="position-card">
                    <div class="position-content" @click="showPositionDetail(position)">
                        <div class="position-header">
                            <div class="position-title">
                                <h3>{{ position.positionName }}</h3>
                                <el-tag size="small" type="success" effect="plain">{{ position.workExperience }}</el-tag>
                            </div>
                            <span class="salary">{{ position.salary }}</span>
                        </div>
                        <div class="position-info">
                            <el-tag size="small" effect="plain">{{ position.departmentName }}</el-tag>
                            <el-tag size="small" effect="plain">{{ position.degreeRequirement }}</el-tag>
                            <span class="location"><el-icon><Location /></el-icon> 成都</span>
                        </div>
                        <div class="position-description">
                            {{ position.positionDescription }}
                        </div>
                        <div class="position-footer">
                            <div class="company-info">
                                <img src="@/assets/img/logo.png" class="company-logo"/>
                                <span>亿星航梦科技有限公司</span>
                            </div>
                            <el-button 
                                type="primary" 
                                @click.stop="handleApply(position)"
                                :disabled="!isLogin"
                            >立即投递</el-button>
                        </div>
                    </div>
                </el-card>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[12, 24, 36, 48]"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>

        <!-- 页脚 -->
        <el-footer class="footer">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>公司简介</p>
                    <p>企业文化</p>
                    <p>联系我们</p>
                </div>
                <div class="footer-section">
                    <h4>加入我们</h4>
                    <p>社会招聘</p>
                    <p>校园招聘</p>
                    <p>实习机会</p>
                </div>
                <div class="footer-section">
                    <h4>关注我们</h4>
                    <div class="qrcode">
                        <img src="@/assets/img/qrcode.jpg" alt="qrcode"/>
                        <p>扫码关注公众号</p>
                    </div>
                </div>
            </div>
            <div class="copyright">
                Copyright © 2024 亿星航梦科技有限公司 版权所有
            </div>
        </el-footer>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, ArrowDown, Location } from '@element-plus/icons-vue'
import { getPositions,getPositionsByDepartment,getPositionsByDegree } from '@/api/positions'
import { getDepartments } from '@/api/department'

const router = useRouter()
const positions = ref([])
const departments = ref([])
const search = ref('')
const department = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const isLogin = ref(false)
const userInfo = ref({})
const degreeMap=ref({
    "data":[
        {
            degree:'大专'
        },
        {
            degree:'本科'
        },
        {
            degree:'硕士'
        },
        {
            degree:'博士'
        }
    ]
})
// 加载职位列表
const loadPositions = async () => {
    try {
        const res = await getPositions({
            current: currentPage.value,
            size: pageSize.value,
            search: search.value,
            // departmentName: department.value,
            // degree: degree.value
        })
        if (res.code === 200) {
            positions.value = res.data.records
            total.value = res.data.total
        }
    } catch (error) {
        console.error('获取职位列表失败：', error)
        ElMessage.error('获取职位列表失败')
    }
}

// 加载部门列表
const loadDepartments = async () => {
    try {
        const res = await getDepartments()
        if (res.code === 200) {
            departments.value = res.data
        }
    } catch (error) {
        console.error('获取部门列表失败：', error)
    }
}

const getPositionsByDepartments = async (item) => {
    try{

        const res = await getPositionsByDepartment(item.departmentName)
        console.log(res)
        if (res.code === 200) {
            positions.value = res.data
        }
    }catch(error){
        console.error('获取职位列表失败：', error)
    }
}

const degree = async (item) =>{
    try{
        console.log(item.degree)
        if(item.degree==='不限'){
            await loadPositions()
        }
        const res = await getPositionsByDegree(item.degree)
        if (res.code === 200) {
                positions.value = res.data
        }
    }catch(error){
            console.error('获取职位列表失败：', error)
         }
}
// 处理搜索
const handleSearch = () => {
    currentPage.value = 1
    loadPositions()
}

// 处理申请
const handleApply = (position) => {
    if (!isLogin.value) {
        ElMessage.warning('请先登录')
        return
    }
    router.push({
        name: 'Apply',
        params: { positionId: position.positionId }
    })
}

// 分页处理
const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1
    loadPositions()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    loadPositions()
}

// 日期格式化
const formatDateTime = (dateStr) => {
    if (!dateStr) return '--'
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    })
}

// 用户相关
const handleLogin = () => {
    router.push('/user/login')
}

const handleLogout = () => {
    localStorage.removeItem('userToken')
    localStorage.removeItem('userInfo')
    isLogin.value = false
    userInfo.value = {}
    ElMessage.success('退出成功')
}

const goToProfile = () => {
    router.push('/user/profile')
}


const showPositionDetail = (position) => {
    router.push({
        name: 'Apply',
        params: {
            positionId: position.positionId
        }
    })
}

onMounted(() => {
    // 检查登录状态
    const token = localStorage.getItem('token')
    if (token) {
        isLogin.value = true
        userInfo.value = JSON.parse(localStorage.getItem('userInfo') || '{}')
    }
    
    loadPositions()
    loadDepartments()
})
</script>

<style scoped>
.home-container {
    min-height: 100vh;
    background-color: #f5f7fa;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
}

.nav-right {
    display: flex;
    align-items: center;
}

.user-info {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-section {
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.search-input {
    width: 400px;
}

.filter-section {
    padding: 0 20px 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.position-list {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.position-card {
    cursor: pointer;
    transition: all 0.3s;
}

.position-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.salary {
    color: #f56c6c;
    font-weight: bold;
}

.position-info {
    display: flex;
    gap: 20px;
    color: #666;
    margin-bottom: 10px;
}

.position-description {
    color: #666;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.position-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.update-time {
    color: #999;
    font-size: 12px;
}

.pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.left-section {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    height: 36px;
}

.company-name {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(45deg, #409eff, #36d1dc);
    -webkit-background-clip: text;
    color: transparent;
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-item {
    font-size: 16px;
    color: #606266;
    cursor: pointer;
    padding: 5px 0;
    position: relative;
}

.nav-item.active {
    color: #409eff;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #409eff;
}

.banner {
    height: 400px;
    background: linear-gradient(135deg, #1c92d2, #f2fcfe);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.banner-content {
    max-width: 800px;
}

.banner-title {
    font-size: 48px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.banner-subtitle {
    font-size: 24px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.filter-item {
    margin-bottom: 20px;
}

.filter-label {
    color: #606266;
    margin-right: 30px;
    font-weight: bold;
}

.filter-options {
    display: inline-flex;
    gap: 15px;
    
}

.option {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.3s;
}

.option:hover {
    color: #409eff;
}

.option.active {
    background-color: #ecf5ff;
    color: #409eff;
}

.position-card {
    margin-bottom: 20px;
}

.position-content {
    cursor: pointer;
}

.position-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.company-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.company-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.footer {
    background-color: #f7f9fc;
    padding: 60px 0 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
}

.footer-section h4 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #303133;
}

.footer-section p {
    margin-bottom: 10px;
    color: #606266;
    cursor: pointer;
}

.footer-section p:hover {
    color: #409eff;
}

.qrcode {
    text-align: center;
}

.qrcode img {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
}

.copyright {
    text-align: center;
    color: #909399;
    border-top: 1px solid #ebeef5;
    padding-top: 20px;
}
</style>